<template>
  <div class="cart">
    <mydjitopnav />
    <div class="beCareful">
      <div class="container">
        <p>
          西安市、延安市、榆林市、渭南市、商洛市、安康市、汉中市、宝鸡市、铜川市于9月10日起
          至9月27日、10月18日至10月29日；甘肃省酒泉市、嘉峪关市于9月16日至9月26日，暂停收取
          无人机及关键零部件，暂停收取无人机及关键零部件，如有上述地区用户在此期间购买以上产
          品，将于物流恢复正常后统一发货。疫情期间受交通管制影响，收货地址为新疆维吾尔自治区
          部分地区、黑龙江省部分地区、河南省部分地区、陕西省部分地区、福建省莆田全市、泉州市
          部分网点、云南省瑞丽市、临沧市镇康县部分网点、普洱市孟连县暂停派件，根据区域政策可
          能更换其他物流公司进行派件，其余部分地区可能出现派送延迟。具体解除时间请以邮管局通
          知为准。给您造成的不便，敬请谅解。
        </p>
      </div>
    </div>
    <div class="my-cart">
      <div class="container">
        <div class="content">
          <h2>我的购物车</h2>
          <div class="allCart">
            <template>
              <a-table
                class="table"
                :row-selection="rowSelection"
                :columns="columns"
                :data-source="cartArr"
                :row-key="(record,index) =>index.toString()"
              >
                <span slot="img" slot-scope="text">
                  <img :src="text" alt="" height="100px">
                </span>
                <span slot="num" slot-scope="text,record">
                  <a-button-group>
                    <a-button @click="changeNum(record.id,{num:record.num - 1})">-</a-button>
                    <a-button type="primary">
                      {{text}}
                    </a-button>
                    <a-button @click="changeNum(record.id,{num:record.num + 1})">+</a-button>
                  </a-button-group>
                </span>
                <span slot="price" slot-scope="text">￥{{text}}</span>
                <!-- <span slot="subtotal" slot-scope="customRender">￥{{customRender}}</span> -->
                <a slot="action" slot-scope="record" @click="del(record.id)"><a-button>删除</a-button></a>
              </a-table>
            </template>
          </div>
          <div class="allPrice">
            <h3>总计（不包括运费）:￥{{selectPrice}}</h3>
            <span class="postage">邮费: <b>免费</b></span>
            <span class="payment">支持支付宝、微信、银联、银行转账、花呗、京东白条和招行分期</span>
          </div>
          <div class="settlement">
            <div class="settlement-left">
              <a href="">
                <button>继续购物</button>
              </a>
            </div>
            <div class="settlement-right">
              <a>
                <button @click="handlerClick">去结算</button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottomnav />
  </div>
</template>

<script>
import mydjitopnav from "../components/MyDjiTopNav.vue";
import bottomnav from "../components/BottomNav.vue";
import {updateCart,deleteCart} from '../assets/js/request.js'

import {mapActions,mapState} from 'vuex'

const columns = [
  {
    title: '商品',
    colSpan: 2,
    dataIndex: 's_good.s_goods_photos[0].path',
    scopedSlots: { customRender: 'img' } ,
  },
  {
    // title: '商品',
    dataIndex: 's_good.name',
    colSpan: 0,
  },
  {
    title: '价格',
    dataIndex: 's_good.price',
    scopedSlots: { customRender: 'price'}
  },
  {
    title: '数量',
    dataIndex: 'num',
    scopedSlots: { customRender: 'num' } 
  },
  {
    title: '小计',
    dataIndex: 'subtotal',
    scopedSlots: { customRender: 'subtotal'},
    customRender: function (text,record) {
      return '￥'+ record.s_good.price * record.num
    },
  },
  { 
    title: '操作', 
    key: 'action', 
    scopedSlots: { customRender: 'action' } 
  },
];
export default {
  data() {
    return {
      // data:,
      columns,
      selectPrice:'',
      selectCart:[],
    };
  },
  components: {
    mydjitopnav,
    bottomnav,
  },
  mounted() {
    // console.log(this.data);
  },
  methods: {
    ...mapActions('cart',['getCartArr']),

    // 加减操作
    async changeNum(id,data) {
      await updateCart(id,data)
      this.getCartArr()
    },
    async del(id) {
      await deleteCart(id)
      this.getCartArr()
    },
    handlerClick() {
      localStorage.setItem('order',JSON.stringify(this.selectCart))
      this.$router.push('/myaddress')
    }
  },
  computed: {
    ...mapState('cart',['cartArr']),
    // 计算总价
    // allPrice() {
    //   return {allPrice:this.cartArr.reduce((sum,prod) => sum + prod.num * prod.s_good.price,0)}
    // },
    rowSelection() {
      let that = this;
      return {
        // 选中的总价格
        onChange: (selectedRowKeys, selectedRows) => {
          that.selectPrice = selectedRows.reduce((sum,prod) => sum + prod.num * prod.s_good.price,0)
          console.log(that.selectPrice);
          console.log(selectedRows);
          // localStorage.setItem('selectCart',JSON.stringify(selectedRows))
          this.selectCart = selectedRows
          console.log(this.selectCart);
          return that.selectPrice
        }
        // onSelect: (record, selected, selectedRows) => {
        //   let a = selectedRows.reduce((sum,prod) => sum + prod.num * prod.s_good.price,0)
        //   console.log(a);
        //   return a
        // },
        // getCheckboxProps: (record) => ({
        //   props: {
        //     defaultChecked: index>=0?true:false
        //     // id: record.id + ''
        //   }
        // })
      };
    },
  },
};
</script>

<style lang="scss" scpoed>
.cart {
  .beCareful {
    .container {
      p {
        text-align: left;
        font-size: 13px;
        padding: 24px 0;
        font-weight: 600;
        margin: 0;
      }
    }
  }
  .my-cart {
    background-color: white;
    padding: 27px 0;
    .content {
      h2 {
        font-size: 32px;
        text-align: left;
      }
      .allCart {
        table {
          thead {
            tr {
              th {
                text-align: left;
                // :nth-of-type(2) {
                //   width: 700px;
                // }
              }
            }
          }
          tbody {
            tr {
              td {
                // :nth-of-type(2) {
                //   width: 100px;
                // }
                // :nth-of-type(3) {
                //   width: 100px;
                // }
              }
            }
          }
        }
      }
      .allPrice {
        text-align: right;
        border-top: 2px solid #f0f1f2;
        padding: 32px 0;
        h3 {
          font-size: 24px;
          margin: 0 0 12px;
        }
        .postage {
          display: block;
          margin: 0 0 12px;
        }
      }
      .settlement {
        border-top: 2px solid #f0f1f2;
        border-bottom: 2px solid #f0f1f2;
        display: flex;
        justify-content: space-between;
        padding: 36px 0;
        button {
          width: 255px;
          height: 44px;
          font-size: 17px;
          border-radius: 5px;
          border: 0;
          background-color: #2aa5f8;
          color: white;
        }
        .settlement-left {
          text-align: left;
          button {
            width: 225px;
            background-color: white;
            color: black;
            border: 1px solid black;
            box-sizing: border-box;
          }
          button:hover {
              border: 1px solid #2aa5f8;
              color: #2aa5f8;
            }
        }
        .settlement-right {
          text-align: right;
          button:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>